<template>
  <footer class="cartview-cartview">
    <div class="cartview-cartmask" @click="cartMaskClick" style="z-index: 10;" :style="{'display':cartOpened?'block':'none'}"></div>
    <div class="cartview-cartbody cartview-cartbodyNoTip" :class="{'cartview-cartbodyOpen':cartOpened}" style="z-index: 11;">
      <section class="discount-tip-discountTip" style="display: none;">此处为原价，「去结算」享优惠哦</section>
      <div :style="{'opacity':cartOpened?1:0}">
        <div class="cartview-cartheader"><span class="cartview-cartheaderText">购物车</span>
          <a href="javascript:" @click="clearCart" class="cartview-cartheaderRemove">
            <svg>
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-remove"></use>
            </svg> <span>清空</span></a>
        </div>
        <div class="entityList-cartbodyScroller">
          <ul>
            <li class="entityList-entityrow" v-for="(spec,foodIdx) in selectedSpecs">
              <span class="entityList-entityname">
                <em class="entityList-name" v-text="spec.name">鲜磨豆浆</em>
                <p class="entityList-entityspecs" v-if="spec.specs.length>0" v-text="spec.specs[0].value"></p>
              </span>
              <span class="entityList-entitytotal">
                <span class="entityList-entitytotalDiscount" v-text="spec.count*spec.price"></span>
              </span>
              <span class="entityList-entitycartbutton">
                <CartCounter :spec="spec"></CartCounter>
              </span>
            </li>

          </ul>
        </div>
      </div>
    </div>
    <div class="bottomNav-cartfooter" style="z-index: 11;">
      <span role="button" :attr-quantity="foodsCount" @click="cartClick" class="bottomNav-carticon" :class="{'bottomNav-empty':foodsCount == 0}"></span>
      <div role="button" class="bottomNav-cartInfo">
        <p class="bottomNav-carttotal"><span>¥{{totalPrice}}</span></p>
        <p class="bottomNav-cartdelivery">配送费¥{{shop.float_delivery_fee}}</p>
      </div> <a role="button" @click="doBuy" href="javascript:;" class="submit-btn-submitbutton" :class="{'submit-btn-disabled':!couldBuy}"><span v-text="payTxt"></span></a></div>
    <v-dialog />
  </footer>

</template>

<script>
  import CartCounter from './CartCounter.vue';
  export default{
      name: 'CartViewer',
      data () {
          return {
            cartOpened: false
          }
      },
      props: {
        selectedFoods: {
          type: Object,
          default: []
        },
        shop: {
          type: Object
        }
      },
      watch: {
        // 监测购物车中商品的数量，如果等于0的话则隐藏打开的购物车
        foodsCount: function (val, oldVal) {
          if (val === 0 && this.cartOpened) {
            this.cartOpened = false;
          }
        }
      },
      computed: {
        foodsCount () {
          let count = 0;
          this.selectedFoods.forEach((food) => {
            food.specfoods.forEach((spec) => {
              if (spec.count && spec.count > 0) {
                count += spec.count
              }
            })
          });
          return count;
        },
        selectedSpecs () {
          let specs = [];
          this.selectedFoods.forEach((food) => {
            food.specfoods.forEach((spec) => {
              if (spec.count && spec.count > 0) {
                specs.push(spec);
              }
            })
          });
          return specs;
        },
        payTxt () {
          let minMoney = this.shop.float_minimum_order_amount;
          let lessMoney = this.totalPrice - minMoney;
          if (this.totalPrice === 0) {
            return `¥${minMoney}元起送`
          } else if (lessMoney < 0) {
            return `还差¥${Math.abs(lessMoney)}起送`;
          } else {
            return '去结算'
          }
        },
        totalPrice () {
          let total = 0;
          this.selectedFoods.forEach((food) => {
            food.specfoods.forEach((spec) => {
              if (spec.count && spec.count > 0) {
                total += spec.count * spec.price;
              }
            })
          });
          return total;
        },
        couldBuy () {
          let minMoney = this.shop.float_minimum_order_amount;
          return this.totalPrice > minMoney;
        }
      },
      methods: {
        // 单击去结算按钮
        doBuy: function (e) {
          let specs = [];
          this.selectedSpecs.forEach((spec) => {
            let specTmp = {
              'sku_id': spec.sku_id,
              'food_id': spec.food_id,
              'count': spec.count
            }
            specs.push(specTmp);
          })
          let jsonData = {
            'user_id': 'zvingzzl',
            'foods': specs,
            'restaurant_id': this.shop.id
          }
          this.$modal.show('dialog', {
              title: '请求后端交互!',
              text: `<h3>提交到后端的json信息:</h3><div style="overflow-x:auto">${JSON.stringify(jsonData)}</div>`,
              buttons: [{ title: '关闭' }]
          })
        },
        // 选择规格事件传递到父组件
        chooseSpec: function (food) {
          this.$emit('chooseSpec', this.food);
        },
        // 单击展开或折叠购物车
        cartClick: function () {
          if (this.foodsCount > 0) {
            this.cartOpened = !this.cartOpened
          }
        },
        // 清空购物车
        clearCart: function () {
          this.selectedSpecs.forEach((spec) => {
            spec.count = 0;
          })
        },
        // 单击购物车遮罩区域隐藏购物车
        cartMaskClick: function () {
          this.cartOpened = false;
        }
      },
      components: {
        CartCounter
      }
  }
</script>

<style>

</style>
